<template>
  <div>
    <el-dialog
      v-dialogDrag
      :fullscreen="isFullscreen"
      :visible.sync="dialogVisible"
      :before-close="closeForm"
      width="5rem"
    >
      <div slot="title" class="header-title hd-title">
        <span>{{ dialogTitle }}</span>
        <i
          v-if="isFullscreen === false"
          class="el-icon-full-screen"
          @click="fScreen"
        ></i>

        <i v-else class="el-icon-news" @click="ifScreen"></i>
      </div>
      <el-form :model="form" :rules="rules" ref="form" label-width="0.5rem">
        <el-row :gutter="0">
          <el-col :span="22">
            <el-form-item
              label="SKU"
              :rules="[
                {
                  required: true,
                  message: '请输入SKU',
                  trigger: ['blur', 'change'],
                },
              ]"
              prop="sku_No"
              name="sku_No"
            >
              <el-input
                placeholder="请输入商品SKU"
                v-model="form.sku_No"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div
          class="product_style"
          v-for="(item, index) in form.product"
          :key="'product_style' + index"
        >
          <el-row :gutter="0">
            <el-col :span="11">
              <el-form-item label="语言类型">
                <el-select
                  style="display: block"
                  placeholder="请选择语言类型"
                  v-model="item.country_abb"
                >
                  <el-option
                    v-for="item in CountryAbbr"
                    :key="item.val"
                    :label="item.key"
                    :value="item.val"
                    >{{ item.key }}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="品名">
                <el-input
                  v-model="item.product_title"
                  placeholder="请输入相关语言商品名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="类型">
                <el-input
                  placeholder="请输入相关语言商品类型"
                  v-model="item.product_category"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="描述">
                <el-input
                  placeholder="请输入相关语言商品描述"
                  v-model="item.product_describe"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <el-button
                size="small"
                type="primary"
                plain
                v-if="index === 0"
                icon="el-icon-plus"
                circle
                @click="addFormItem()"
              ></el-button>
              <el-button
                size="small"
                v-if="index !== 0"
                type="danger"
                plain
                icon="el-icon-minus"
                circle
                @click="removeFormItem(index)"
              ></el-button>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="11">
            <el-form-item
              style="display: inline-block"
              label="是否带电"
              name="charged"
              prop="charged"
            >
              <el-checkbox
                v-if="form.specifications"
                v-model="form.specifications.charged"
                >是否带电?
              </el-checkbox>
            </el-form-item>
            <el-form-item style="display: inline-block" label="" prop="liquid">
              <el-checkbox
                v-if="form.specifications"
                v-model="form.specifications.liquid"
                >是否液体?
              </el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="颜色"
              prop="specifications.color"
              :rules="[
                {
                  required: true,
                  message: '请输入相关商品颜色',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <el-input
                placeholder="请输入商品颜色"
                v-if="form.specifications"
                v-model="form.specifications.color"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="HsCode" prop="hs_code" name="hs_code">
              <el-input
                v-model="form.hs_code"
                placeholder="请输入HsCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="单价"
              :rules="[
                {
                  required: true,
                  message: '请输入单价',
                  trigger: ['blur', 'change'],
                },
              ]"
              prop="univalent"
            >
              <el-input
                placeholder="请输入商品单价"
                v-model="form.univalent"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="单重"
              :rules="[
                {
                  required: true,
                  message: '请输入重量',
                  trigger: ['blur', 'change'],
                },
              ]"
              prop="weight"
            >
              <el-input
                placeholder="请输入商品单重"
                v-model="form.weight"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="长度"
              :rules="[
                {
                  required: true,
                  message: '请输入长',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <el-input
                v-if="form.volume"
                v-model="form.volume.L"
                placeholder="请输入商品长度"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="宽度"
              :rules="[
                {
                  required: true,
                  message: '请输入宽',
                  trigger: ['blur', 'change'],
                },
              ]"
              name="univalent"
              prop="univalent"
            >
              <el-input
                placeholder="请输入商品宽度"
                v-if="form.volume"
                v-model="form.volume.W"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="高度"
              :rules="[
                {
                  required: true,
                  message: '请输入高',
                  trigger: ['blur', 'change'],
                },
              ]"
              prop="weight"
            >
              <el-input
                v-if="form.volume"
                v-model="form.volume.H"
                placeholder="请输入商品高度"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button size="small" type="primary" @click="handleSubmit"
          ><i class="el-icon-circle-plus-outline"></i> 保存
        </el-button>
        <el-button size="small" @click="closeForm"
          ><i class="el-icon-circle-close"></i> 取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCountryAbbr } from "@/api/sku";

export default {
  props: {
    editData: {
      type: Object,
      default: () => ({}),
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isFullscreen: false,
      form: {
        hs_code: "",
        product: [
          {
            country_abb: "",
            product_title: "",
            product_describe: "",
            product_category: "",
          },
        ],
        univalent: "",
        weight: "",
        volume: {
          L: "",
          W: "",
          H: "",
        },
        specifications: {
          charged: false,
          liquid: false,
          color: "",
        },
      },
      membe_list: null,
      CountryAbbr: null,
      rules: {
        hs_code: [
          { required: true, message: "请输入HsCode编码", trigger: "blur" },
        ],
        country_abb: [
          {
            required: true,
            message: "请选择语言类型",
            trigger: ["blur", "change"],
          },
        ],
        product_title: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: ["blur", "change"],
          },
        ],
        product_category: [
          {
            required: true,
            message: "请输入商品类型",
            trigger: ["blur", "change"],
          },
        ],
        product_describe: [
          {
            required: true,
            message: "请输入商品描述",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  watch: {
    editData: {
      handler(val) {
        this.form = { ...val };
      },
      immediate: true,
    },
    dialogVisible(val) {
      if (val) {
        this.getCountryAbbr();
      }
    },
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("submit", this.form);
          this.closeForm();
        }
      });
    },
    closeForm() {
      this.$emit("closeForm");
      this.isFullscreen = false;
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
    },
    fScreen() {
      this.isFullscreen = true;
    },
    ifScreen() {
      this.isFullscreen = false;
    },
    async getCountryAbbr() {
      const res = await getCountryAbbr();
      this.CountryAbbr = res.data.data;
    },
    addFormItem() {
      this.form.product.push({
        country_abb: "",
        product_title: "",
        product_describe: "",
        product_category: "",
      });
    },
    removeFormItem(index) {
      this.form.product.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox__label {
  color: #a9a9a9;
}

.el-form-item {
  // margin-bottom: 6px;
}

::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-dialog__body {
  padding: 20px 20px 0 20px;
}

::v-deep .el-dialog__footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.el-select-dropdown
  .el-scrollbar
  .el-scrollbar__view
  .el-select-dropdown__item {
  height: auto;
  padding: 0 15px;
}

.hd-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 26px;
}

.el-icon-full-screen {
  cursor: pointer;
}

.el-icon-news {
  cursor: pointer;
}
</style>
